<template>
    <div class="background">
        <el-container class="fill">
            <el-header>
                <div class="header-title">实体店信发产品终端 Dashboard</div>
            </el-header>
            <el-main class="fill">
                <el-container class="fill">
                    <el-aside>
                        <el-menu
                            :default-active="$route.path"
                            :router="true"
                            style="border-right: 0"
                            background-color="#283341"
                            text-color="#fff"
                            active-text-color="#ff0">
                            <el-menu-item index="/deviceStatus" class="menu-item">
                                <span slot="title">终端基本数据</span>
                            </el-menu-item>

                            <el-menu-item index="/cpuMonitor" class="menu-item">
                                <span slot="title">CPU监控</span>
                            </el-menu-item>

                            <el-menu-item index="/memoryMonitor" class="menu-item">
                                <span slot="title">内存监控</span>
                            </el-menu-item>

                        </el-menu>
                    </el-aside>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Dashboard",
        data () {
            return {
            }
        },
        mounted() {
            if(this.$route.path === '/') {
                this.$router.push({
                    path: '/deviceStatus'
                })
            }
        }
    }
</script>

<style scoped>
    .background {
        background-color: #283341;
        width: 100%;
        height:100%;
        text-align: center;
    }

    .header-title {
        text-align: start;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 1.3em;
        color: #FFF;
        font-weight: bold;
    }

    .menu-item {
        font-size: 1.1em;
        font-weight: bold;
    }
</style>